<template>
	<view class="custom-tab-bar">
		<view v-for="(item, index) in tabList" :key="index" class="tab-item" @click="switchTab(item)">
			<block v-if="index == 2">
				<view class="box">
					<view class="Half_circle">
						<view class="circle absolute text-center">
							<view class="wrap">
								<image :src="currentTab === item.pagePath ? item.selectedIconPath : item.iconPath"
									class="tab-icon">
								</image>
							</view>
							<text
								:class="['tab-text', { 'active': currentTab === item.pagePath }]">{{ item.text }}</text>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<image :src="currentTab === item.pagePath ? item.selectedIconPath : item.iconPath" class="tab-icon">
				</image>
				<text :class="['tab-text', { 'active': currentTab === item.pagePath }]">{{ item.text }}</text>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props:['defaultBar'],
		data() {
			return {
				tabList: [{
						"pagePath": "/pages/tabbar/index/index",
						"iconPath": "../../static/img/tabbar/home.png",
						"selectedIconPath": "../../static/img/tabbar/homeactive.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/tabbar/order/order",
						"iconPath": "../../static/img/tabbar/guanzhu.png",
						"selectedIconPath": "../../static/img/tabbar/guanzhuactive.png",
						"text": "订单"
					},
					{
						"pagePath": "/pages/tabbar/tabbar-3/tabbar-3",
						"iconPath": "../../static/img/tabbar/add.png",
						"selectedIconPath": "../../static/img/tabbar/addactive.png",
						"text": "立即下单"
					},
					{
						"pagePath": "/pages/tabbar/message/message",
						"iconPath": "../../static/img/tabbar/news.png",
						"selectedIconPath": "../../static/img/tabbar/newsactive.png",
						"text": "消息"
					},
					{
						"pagePath": "/pages/tabbar/mine/mine",
						"iconPath": "../../static/img/tabbar/me.png",
						"selectedIconPath": "../../static/img/tabbar/meactive.png",
						"text": "我"
					}
				],
				currentTab: '/pages/tabbar/index/index'
			};
		},
		methods: {
			switchTab(path) {
				this.$emit("openTab",path)
				// return path
				// uni.switchTab({
				// 	url: path,
				// 	success: () => {
						this.currentTab = path.pagePath

				// 	}
				// });
			}
		},
		onShow() {
			const pages = getCurrentPages();
			console.log(pages)
			const currentPage = pages[pages.length - 1];
			this.currentTab = currentPage.route;
			this.currentTab =  this.defaultBar ? this.defaultBar : '/pages/tabbar/index/index'
		}
	};
</script>

<style scoped lang="scss">
	.custom-tab-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		width: 100%;
		padding-bottom: 66rpx;

		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tab-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.tab-text {
				font-size: 24rpx;
				color: #7a7a7a;
			}

			.tab-text.active {
				color: #007aff;
			}

			.box {
				position: relative;
				width: 140rpx;
				height: 118rpx;
				padding-bottom: 100rpx;

				.Half_circle {
					width: 141rpx;
					height: 141rpx;
					background-color: #fff;
					border-radius: 50%;
					position: absolute;
					box-shadow: 3px 6px 20px #7a7a7a;

					.circle {
						top: 0;
						width: 122rpx;
						height: 122rpx;
						background-color: #afafaf;
						border-radius: 50%;
						margin: 11rpx;

						.wrap {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							padding-top: 20rpx;
						}
					}
				}
			}
		}

	}
</style>